
export const data = {
    "key": "upload-file",
    "title": "Upload-File 文件上传",
    "titleText": ["目前支持图片列表展示，文件列表展示(可预览文件弹框)，按钮自定义展示", "该组件的内部删除按钮为假删，不会调用接口，要真删的话需要手动调用 sureDelFile/initDelFile方法，或者外部删除。"],
    CODEList: [
        {
            title: '基本用法',//标题
            introduction: "最简单的用法",//简介
            btnList: [],
            imgs: [
                {
                    url: '1.png',
                    width: "300px",
                    height: "150px",
                    isOpen: true
                },
            ],
            reactHTML: `
                <p><font color="#008dff">import</font> { useRef，FC，useEffect } <font color="#f81d22">from</font> "<font color="#0b8235">react</font>"</p><p><font color="#008dff">const</font> UploadComponent:<font color="#008dff">FC</font> =&nbsp;<span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">(</span><span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">)</span><font color="#999999">=&gt; {</font></p><p>&nbsp; <font color="#008dff">const</font> fileRef = <font color="#bb59b9">useRef</font><font color="#008dff">&lt;any&gt;</font><span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">(</span><span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">)</span></p><p>&nbsp; <font color="#bb59b9">useEffect</font><font color="#999999">(</font><span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">(</span><span class="code-punctuation" style="font-family: &quot;Lucida Console&quot;, Arial, sans-serif; font-size: 14px; text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">)</span><font color="#008dff">&nbsp;=&gt;</font> <font color="#999999">{</font></p><p>&nbsp; &nbsp; if ( fileRef.<font color="#008dff">current</font> ) <font color="#999999">{</font></p><p>&nbsp; &nbsp; &nbsp; fileRef.<font color="#008dff">current</font>.<font color="#0b8235">onChange</font> = fileOnChange</p><p>&nbsp; &nbsp; <font color="#999999">}</font></p><p>&nbsp; <font color="#999999">}</font>，[]<font color="#999999">)</font></p><p><br></p><p>&nbsp; <font color="#008dff">function</font> <font color="#0b8235">fileOnChange</font>(<font color="#0b8235">attachmentId</font>:<font color="#008dff">string</font>，<font color="#0b8235">fileList</font>:<font color="#008dff">FileOptions</font>) {</p><p>&nbsp; &nbsp;<font color="#999999"> //attachmentId-文件目录id</font></p><p><font color="#999999">&nbsp; &nbsp; //fileList-文件列表</font></p><p>&nbsp; }</p><p>&nbsp; <font color="#f81d22">return</font> &lt;<font color="#f81d22">upload-file</font> <font color="#0b8235">ref</font>=<font color="#999999">{</font>fileRef<font color="#999999">}</font> /&gt;</p><p><font color="#999999">}</font></p>
            `,
            reactCode: `
            import { useRef,FC,useEffect } from "react"
            const UploadComponent:FC = ()=> {
                const fileRef = useRef<any>()
                useEffect(() => {
                    if ( fileRef.current ) {
                    fileRef.current.onChange = fileOnChange
                    }
                },[])
                function fileOnChange(attachmentId:string,fileList:FileOptions) {
                    //attachmentId-文件目录id
                    //fileList-文件列表
                }
                return <upload-file ref={fileRef} />
            }
            `,
            vueHTML: `
            <p><span class="code-punctuation">&lt;</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span></p><blockquote><p><span class="code-tag"><span class="code-punctuation">&lt;</span>upload-file&nbsp;<span class="code-attr-name">ref</span><span class="code-punctuation">=</span><span class="code-punctuation">"fileRef"</span><span class="code-punctuation">&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-tag">upload-file</span><span class="code-punctuation">&gt;</span></span></p></blockquote><p><span class="code-punctuation">&lt;/</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span><br><span class="code-punctuation">&lt;</span><span class="code-tag">script</span><span class="code-punctuation">&gt;</span><br><span class="code-tag">export default</span>&nbsp;{</p><blockquote><p><span class="code-method">data</span><span class="code-punctuation">()</span>&nbsp;{</p></blockquote><blockquote><blockquote><p><span class="code-tag">return</span>&nbsp;{</p></blockquote></blockquote><blockquote><blockquote>}</blockquote></blockquote><blockquote>},<br><span class="code-method">mounted</span><span class="code-punctuation">()</span>{</blockquote><blockquote><blockquote><p>this.$refs.fileRef.<span class="code-attr-name">onChange</span>&nbsp;= <font color="#ea7c0a">this</font>.<font color="#0b8235">fileOnChange</font>.<font color="#008dff">bind</font>(<font color="#ea7c0a">this</font>)</p></blockquote></blockquote><blockquote>},<br><span class="code-method">methods</span>:{</blockquote><blockquote><blockquote><p><font color="#000000">fileOnChange</font>(<font color="#0b8235">attachmentId</font>，<font color="#0b8235">fileList</font>) {</p><p><font color="#999999">//attachmentId-文件目录id</font></p><p><font color="#999999">//fileList-文件列表</font></p><p>}</p></blockquote></blockquote><blockquote>}</blockquote><blockquote style="margin: 0px;"><span style="color: var(--vt-c-text-1);">}</span></blockquote><p><span class="code-punctuation">&lt;/</span><span class="code-tag">script</span><span class="code-punctuation">&gt;</span></p>
            `,
            vueCode: `
            <template>
                <upload-file ref="fileRef"></upload-file>
            </template>
            <script>
            export default {
                data() {
                    return {
                    }
                },
                mounted(){
                    this.$refs.fileRef.onChange = this.fileOnChange.bind(this)
                },
                methods:{
                    fileOnChange(attachmentId,fileList) {
                    //attachmentId-文件目录id
                    //fileList-文件列表
                    }
                }
            }
            `,
        },
        {
            title: '样式类型',//标题
            introduction: "目前支持三种类型image-list，file-list（可点击预览弹框文件），file-button",//简介
            btnList: [],
            imgs: [
                {
                    url: '2.png',
                    width: "250px",
                    height: "300px",
                    isOpen: true
                },
            ],
            reactHTML: `
            <p><font color="#008dff">import</font>&nbsp;{ FC }&nbsp;<font color="#f81d22">from</font>&nbsp;"<font color="#0b8235">react</font>"</p><p><font color="#008dff">const</font>&nbsp;UploadComponent:<font color="#008dff">FC</font>&nbsp;=&nbsp;<span class="code-punctuation">(</span><span class="code-punctuation">)</span><font color="#999999">=&gt; {</font></p><p>&nbsp;&nbsp;<font color="#f81d22">return</font>&nbsp;&lt;&gt;</p><p>&nbsp; &nbsp;&nbsp;<span style="color: var(--vt-c-text-1);">&lt;</span><font color="#f81d22">upload-file</font><span style="color: var(--vt-c-text-1);">&nbsp;</span><span style="color: var(--vt-c-text-1);">/&gt;</span></p><p><span style="color: var(--vt-c-text-1);">&nbsp; &nbsp;&nbsp;</span><span style="color: var(--vt-c-text-1);">&lt;</span><font color="#f81d22">upload-file</font><span style="color: var(--vt-c-text-1);">&nbsp;</span><font color="#0b8235">styletype</font><span style="color: var(--vt-c-text-1);">="</span><font color="#999999">file-list</font><span style="color: var(--vt-c-text-1);">"</span><span style="color: var(--vt-c-text-1);">&nbsp;</span><span style="color: var(--vt-c-text-1);">/&gt;</span></p><p><span style="color: var(--vt-c-text-1);">&nbsp; &nbsp;&nbsp;</span><span style="color: var(--vt-c-text-1);">&lt;</span><font color="#f81d22">upload-file</font><span style="color: var(--vt-c-text-1);">&nbsp;</span><font color="#0b8235">styletype</font><span style="color: var(--vt-c-text-1);">="</span><font color="#999999">file-button</font><span style="color: var(--vt-c-text-1);">"</span><span style="color: var(--vt-c-text-1);">&nbsp;</span><span style="color: var(--vt-c-text-1);">/&gt;</span></p><p>&nbsp; &lt;/&gt;</p><p><font color="#999999">}</font></p>
            `,
            reactCode: `
            import { FC } from "react"
            const UploadComponent:FC = ()=> {
                return <>
                    <upload-file />
                    <upload-file styletype="file-list" />
                    <upload-file styletype="file-button" />
                </>
            }
            `,
            vueHTML:`
            <p><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;</span><span class="code-tag" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">template</span><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&gt;</span></p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;<font color="#f81d22">div</font>&gt;</span></p></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><span class="code-tag"><span class="code-punctuation">&lt;</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span>&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span>&gt;</span></span></p></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><span class="code-tag"><span class="code-punctuation"><span class="code-punctuation">&lt;</span><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span><span style="color: rgb(248, 29, 34);">&nbsp;</span><span class="code-punctuation"><font color="#0b8235" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">styletype</font><span style="color: var(--vt-c-text-1); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">="</span><font color="#999999" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">file-list</font><span style="color: var(--vt-c-text-1); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">"</span>&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span>&gt;</span></span></span></p></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><span class="code-tag"><span class="code-punctuation"><span class="code-punctuation"><span class="code-punctuation">&lt;</span><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span><span style="color: rgb(248, 29, 34);">&nbsp;</span><span class="code-punctuation"><font color="#0b8235" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">styletype</font><span style="color: var(--vt-c-text-1); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">="</span><font color="#999999" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">file-button</font><span style="color: var(--vt-c-text-1); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">"</span>&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34); text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">upload-file</span>&gt;</span></span></span></span></p></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;/<font color="#f81d22">div</font>&gt;</span></p></blockquote><p><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;/</span><span class="code-tag" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">template</span><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&gt;</span><span style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);"></span><br style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);"><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;</span><span class="code-tag" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">script</span><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&gt;</span><span style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);"></span><br style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);"><span class="code-tag" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">export default</span><span style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&nbsp;{</span></p><blockquote style="margin: 0 0 0 0; border: none; padding: 0px;"><span style="background-color: rgb(248, 248, 248); text-wrap-mode: nowrap; color: var(--vt-c-text-1);">}</span></blockquote><p><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&lt;/</span><span class="code-tag" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">script</span><span class="code-punctuation" style="text-wrap-mode: nowrap; background-color: rgb(248, 248, 248);">&gt;</span></p>
            `,
            vueCode:`
            <template>
                <div>
                    <upload-file></upload-file>
                    <upload-file styletype="file-list"></upload-file>
                    <upload-file styletype="file-button"></upload-file>
                </div>
            </template>
            <script>
            export default {
            }
            </script>
            `
        }
    ],
    APIList: [
        {
            field: "styletype",
            remark: "样式类型，目前支持三种类型image-list，file-list（可点击预览弹框文件），file-button",
            type: "string",
            default: "image-list"
        },
        {
            field: "disabled",
            remark: "是否禁用",
            type: "boolean",
            default: "false"
        },
        {
            field: "baseurl",
            remark: "文件前缀地址",
            type: "string",
            default: "/dxdsapi"
        },
        {
            field: "imgurl",
            remark: "文件预览地址",
            type: "string",
            default: "/Attachment/downloadAttachment/"
        },
        {
            field: "value",
            remark: "文件夹id,外部传入后会回显该文件夹下的所有文件",
            type: "string",
            default: ""
        },
        {
            field: "maxcount",
            remark: "最大上传文件数量，当超过这个数量时，最新的文件会替换掉前面的文件",
            type: "number",
            default: "10"
        }
    ],
    otherList: [//其他
        {
            title: "接受方法",
            titleText: ["通过绑定ref给组件内部传入的执行方法", "Vue中使用注意This指向问题，建议用bind绑定", "在这些事件中无法访问到React Hooks得最新值，这是因为 React 的 useState 是通过 React 的渲染机制来管理状态的，而 Web Component 是在 React 组件之外运行的，React 无法自动同步它的状态到 Web Component 的事件回调中。\n解决办法：", "1、useCallback + useEffect。", "2、在每次组件渲染时重新给事件赋值。", "3、在react函数外部定义变量，useEffect监听hooks改变赋值给外部变量。"],
            header: ["参数", "说明", "类型"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "onChange",
                    remark: "文件上传完成后返回给外部数据得方法",
                    type: "function（attachmentId:string，fileList:FileOptions）：void",
                },
                {
                    name: "customUploadFn",
                    remark: "自定义上传方法,需要一个Promise类型，用于内部监听上传进度",
                    type: "function（files：File[]）: Promise<any>",
                },
                {
                    name: "delFileFn",
                    remark: "删除文件触发的方法",
                    type: "function（files：FileOptions[]，file:FileOptions）: Promise<any>",
                },
            ]
        },
        {
            title: "内部方法",
            titleText: ["通过绑定ref调用组件内部的方法"],
            header: ["参数", "说明", "类型"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "sureDelFile",
                    remark: "确定删除已经被关闭的文件，一般用于提交时，删除之前上传的文件",
                    type: "function（）：void",
                },
                {
                    name: "initDelFile",
                    remark: "删除除了初始文件的所有文件，一般用于未提交时，删除多余的上传文件",
                    type: "function（）：void",
                },
                {
                    name: "delBtnFileHandler",
                    remark: "删除文件（假删），一般用于外部自定义删除",
                    type: "function（file:FileOptions）: void",
                },
            ]
        },
        {
            title: "插槽",
            titleText: ["自定义上传按钮内容"],
            header: ["name", "说明", "使用方法"],
            list: [
                {
                    name: "data-slot-img",
                    remark: "image-list上传按钮的内容",
                    use: "<标签 data-slot-img />"
                },
                {
                    name: "data-slot-file",
                    remark: "file-list上传按钮的内容",
                    use: "<标签 data-slot-file />"
                },
                {
                    name: "data-slot-button",
                    remark: "file-button上传按钮的内容",
                    use: "<标签 data-slot-button />"
                },
            ]
        },
    ]
}